<template>
	<view class="cancellation_reason">
		<view class="container">
			<view class="title">取消订单</view>
			<view class="subtitle">请输入取消订单的原因，300字以内。</view>
			<view class="content">
				<textarea v-model="reason" class="input-area" placeholder="输入原因" placeholder-class="placeholder" :maxlength="300" />
				<text class="word-count">{{ reason.length }}/300</text>
			</view>
		</view>
		<view class="submit-btn" :class="reason ? 'submit-btn_active' : ''" @click="handleSubmit">提交</view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import api from "@/api";
import { onLoad, onShow } from "@dcloudio/uni-app";

let orderId = ref("");
let orderDetailId = ref("");
let orderType = ref("");
let checkedList = ref([]);
const reason = ref("");

const handleSubmit = async () => {
	if (!reason.value.trim()) {
		uni.showToast({
			title: "请输入取消原因",
			icon: "none"
		});
		return;
	}
	let url = "";
	let data = {};
	if (orderType.value == -1) {
		url = `/mall/order/cancelV2`;
		data = {
			id: orderId.value,
			refuseReason: reason.value
		};
	} else {
		url = `/mall/order/order-detail/cancelV2`;
		data = {
			orderId: orderId.value,
			orderDetailIds: checkedList.value,
			cancelReason: reason.value
		};
	}
	const res = await api({
		method: "post",
		contentType: "json",
		url: url,
		data: data
	});
	if (res.code == 0) {
		uni.showToast({
			title: "提交成功",
			icon: "success"
		});
		if (orderType.value == -1) {
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				});
			}, 1000);
		} else {
			setTimeout(() => {
				uni.navigateBack({
					delta: 2
				});
			}, 1000);
		}
	} else {
		uni.showToast({
			title: res.msg,
			icon: "none"
		});
	}
};
onLoad((options) => {
	orderId.value = options.orderId;
	orderDetailId.value = options?.orderDetailId;
	orderType.value = options.orderType;
	if (options.hasOwnProperty("checkedList")) {
		checkedList.value = options?.checkedList.split(",") || [];
	}
});
</script>

<style scoped lang="scss">
.cancellation_reason {
	padding: 34rpx 32rpx;
}

.container {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	border-radius: 24rpx;
	padding: 40rpx 32rpx;
	box-sizing: border-box;
}

.header {
	padding: 40rpx 0;
}

.title {
	font-weight: bold;
	font-size: 32rpx;
	color: #1a1a1a;
}

.subtitle {
	font-weight: 400;
	font-size: 26rpx;
	color: #7c807f;
	margin-top: 16rpx;
}

.content {
	position: relative;
	flex: 1;
	width: 100%;
	margin-top: 32rpx;
}

.input-area {
	width: 100%;
	height: 622rpx;
	padding: 24rpx;
	box-sizing: border-box;
	background-color: #f5f6f7;
	border-radius: 16rpx;
	line-height: 1.5;
	position: relative;
	font-weight: 400;
	font-size: 30rpx;
	color: #1b2120;
}

.placeholder {
	font-weight: 400;
	font-size: 30rpx;
	color: #cacccc;
}

.word-count {
	position: absolute;
	right: 24rpx;
	bottom: 24rpx;
	font-size: 12px;
	color: #999999;
}

.submit-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: linear-gradient(90deg, #ffa6bc 0%, #ffa3a3 100%);
	color: #ffffff;
	font-size: 28rpx;
	border-radius: 44rpx;
	margin-top: 24rpx;
}

.submit-btn_active {
	background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
}
</style>
